
<template>
	<div class="p-6 space-y-6">

		<el-form :inline="true" :model="filters" class="mb-4">
			<el-form-item label="产品名称">
				<el-input v-model="filters.keyword" placeholder="请输入产品名称" size="small" style="width: 200px" clearable />
			</el-form-item>
			<el-form-item label="仓库">
				<el-select v-model="filters.warehouse" placeholder="请选择仓库" size="small" style="width: 200px" clearable>
					<el-option v-for="w in warehouses" :key="w" :label="w" :value="w" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" @click="applyFilters">搜索</el-button>
				<el-button size="small" @click="resetFilters">重置</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="filteredStock" border>
			<el-table-column prop="product" label="产品名称" />
			<el-table-column prop="warehouse" label="所属仓库" />
			<el-table-column prop="quantity" label="库存数量" />
			<el-table-column prop="unit" label="单位" />
		</el-table>
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const filters = ref({ keyword: '', warehouse: '' })
const stockList = ref([])
const warehouses = ['仓库1', '仓库2', '仓库3']

const filteredStock = computed(() => {
	return stockList.value.filter(item => {
		const matchKeyword = filters.value.keyword ? item.product.includes(filters.value.keyword) : true
		const matchWarehouse = filters.value.warehouse ? item.warehouse === filters.value.warehouse : true
		return matchKeyword && matchWarehouse
	})
})

const applyFilters = () => {
	// 计算属性已实时更新，无需额外逻辑
}

const resetFilters = () => {
	filters.value = { keyword: '', warehouse: '' }
}

onMounted(() => {
	const products = [
		'EUV光刻胶', 'G线光刻胶', '紫外宽谱光刻胶', '电子光束刻胶',
		'氧化硅抛光液', '氧化铝抛光液', '纳米抛光液',
		'显影液', '去胶剂', '清洗剂', '蚀刻液'
	]
	stockList.value = Array.from({ length: 15 }).map(() => {
		return {
			product: products[Math.floor(Math.random() * products.length)],
			warehouse: warehouses[Math.floor(Math.random() * warehouses.length)],
			quantity: Math.floor(Math.random() * 1000) + 1,
			unit: '件'
		}
	})
})
</script>

<style scoped>
.text-xl {
	font-size: 1.25rem;
}
</style>
  
